<!--
 * @Author: 偻儸小卒[EdisonLiu_]
 * @Date: 1970-01-01 08:00:00
 * @LastEditors: 偻儸小卒[EdisonLiu_]
 * @LastEditTime: 2020-04-13 15:13:06
 * @Description: 首页
 -->
<template>
  <commonPage :showHeader="false">
    <scroller
      slot="page_body"
      style="height:100%"
      ref="my_scroller"
      :on-refresh="refresh"
      :on-infinite="infinite"
      refresh-layer-color="#4b8bf4"
      loading-layer-color="#ec4949"
      class="page_body"
    >
      <div>
        <div class="header-search">
          <div class="search-region">
            <span class="before">
              <img src="@/assets/images/index/logo_new.png" alt="" />
            </span>
            <input
              type="search"
              v-model="search_text"
              placeholder="点击收入你想要的内容"
            />
            <span class="after" @click="get_search">
              <img src="@/assets/images/index/search_icon.png" alt="" />
            </span>
          </div>
          <swiper
            :aspect-ratio="imgheight"
            :show-desc-mask="false"
            :show-dots="false"
            dots-position="center"
            dots-class="dots-swipe-bullet"
            :loop="true"
          >
            <swiper-item
              class="swiper-demo-img"
              v-for="(item, index) in swiper_list"
              :key="index"
            >
              <img :src="item.img" ref="banner_img" />
            </swiper-item>
          </swiper>
        </div>

        <div class="index_grids" v-cloak>
          <div v-for="(item, item_index) in class_link" :key="item_index">
            <router-link
              :to="item.url ? item.url : '/match/march_list/' + item.id"
            >
              <span class="title">{{ item.title }}</span>
              <img :src="item.bg" alt="" />
            </router-link>
          </div>
        </div>

        <div class="match_title"><span>最新赛事</span></div>

        <router-link
          v-for="(match, index) in match_list"
          :to="'/match/match_detail/index/' + match.id"
          :key="index"
        >
          <matchInc class="match_lists" :match="match" />
        </router-link>
      </div>
    </scroller>
  </commonPage>
</template>
<script>
import commonPage from "../common/commonPage";
import matchInc from "../plugin/match_inc";
import { Toast } from 'mint-ui';
export default {
  name: "index",
  data() {
    return {
      search_text: "",
      imgheight: 192 / 375,
      swiper_list: [
        {
          url: "javascript:",
          img: require("@/assets/images/index/banner_new.png"),
          title: ""
        },
        {
          url: "javascript:",
          img: require("@/assets/images/index/banner_two.jpg"),
          title: ""
        },
        {
          url: "javascript:",
          img: require("@/assets/images/index/banner_four.jpg"),
          title: ""
        }
      ],
      class_link: [
        {
          title: "--",
          bg: require("@/assets/images/index/mathematics_class_icon.png")
          // url: "/match/match_list"
        },
        {
          title: "--",
          bg: require("@/assets/images/index/foreign_languages_class_icon.png")
          // url: "foreign"
        },
        {
          title: "--",
          bg: require("@/assets/images/index/writing_class_icon.png")
          // url: "writing"
        },
        {
          title: "--",
          bg: require("@/assets/images/index/art_class_icon.png")
          // url: "art"
        }
      ],
      match_list: []
    };
  },
  components: {
    commonPage,
    matchInc
  },

  created() {
    this.get_swiper_height();
    this.get_classify();
    this.get_newMatch();
    this.$wxShare(
      {
        title: "同根赛事平台", // 分享标题
        desc: "同根赛事平台", // 分享描述
        link: window.location.href // 分享链接
        //   debug:true
      },
      function() {
        //分享成功后的回调函数
      }
    );
  },
  methods: {
    //搜索方法
    get_search() {
      let that = this;
      if (that.search_text.trim() == "") {
        this.$toast({
          message:'请输入要搜索的内容！',
          position:"bottom",
          duration:1500
        });
      }else{
       this.$router.push({path: '/match/match_list', query: {search_text: that.search_text}});
      }
    },
    //获取分类
    get_classify() {
      let that = this;
      this.$axios
        .post("match.getClassify", {})
        .then(res => {
          that.class_link = res.result;
        })
        .catch(error => {
          console.log(error);
        });
    },
    //获取最新比赛
    get_newMatch() {
      let that = this;
      this.$axios
        .post("match.getMatchList", { new_match: 1 })
        .then(res => {
          that.match_list = res.result.list;
        })
        .catch(error => {
          console.log(error);
        });
    },
    //自动计算banner背景高度
    get_swiper_height() {
      let that = this;
      setTimeout(() => {
        let imgheight = this.$refs.banner_img[0].height;
        that.imgheight;
      }, 1000);
    },
    refresh(done) {
      let that = this;
      setTimeout(() => {
        that.$router.go(0);
        done();
      }, 1000);
    },
    infinite(done) {
      let that = this;
      setTimeout(() => {
        done(true);
      }, 1500);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.page_body {
  font-size: 0.7rem;
}

.header-search {
  position: relative;

  .search-region {
    position: absolute;
    z-index: 10000;
    top: 1rem;
    width: 90%;
    margin-left: 5%;
    background: white;
    text-align: center;
    height: 2.4rem;
    border-radius: 2.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .after {
      width: 2.5rem;
      height: 100%;
      display: block;

      img {
        margin-right: 0.8rem;
        height: calc(100% - 0.8rem);
        margin-top: 0.4rem;
        width: auto;
      }
    }

    .before {
      width: 2rem;
      height: 1.8rem;
      display: block;
      margin: 0 0.25rem;

      img {
        height: 100%;
        width: auto;
      }
    }

    input {
      width: 100%;
      height: 100%;
      border: 0;
    }
  }
}

.index_grids {
  margin: 1rem 4%;
  width: 92%;
  display: flex;
  justify-content: space-between;

  [v-cloak] {
    display: none;
  }

  div {
    text-align: center;
    position: relative;

    a {
      display: block;
    }

    span {
      top: 0.35rem;
      left: 0.95rem;
      position: absolute;
      color: white;
    }

    img {
      width: 94%;
      min-height: 3.4rem;
    }
  }
}

.match_title {
  height: 1.8rem;
  margin-bottom: 0.6rem;
  line-height: 2.2rem;
  font-size: 0.9rem;
  font-weight: 700;
  margin-left: 5%;
  display: flex;

  &:before {
    content: ' ';
    background: #4848ff;
    height: 100%;
    display: inline-block;
    width: 0.4rem;
    border-radius: 0.3rem;
  }

  span {
    display: block;
    margin-left: 0.3rem;
  }
}

.match_lists {
  margin: 0 5%;
  width: 90%;
  margin-top: 1rem;
}

.swiper-demo-img {
  img {
    width: 100%;
  }
}

@media screen and (min-width: 450px) {
  .index_grids div span {
    font-size: 1rem;
    left: 1.2rem;
    top: 0.6rem;
  }
}

@media screen and (min-width: 700px) {
  .index_grids div span {
    font-size: 1rem;
    left: 2rem;
    top: 1rem;
  }
}
</style>
